:root {
  @extend %type--base;
  font-size: 100%;
}

.type {
  @extend %type--base;
  position: relative;

  @for $i from 1 through 6 {
    &--h#{$i} {
      @extend %type--h#{$i};
    }

    // For articles we size our headings down a level, meaning
    // an h1 will be styled to look like an h2, and so on.
    // Because these headings come from markdown they're always h1-h6 without
    // a class applied.
    @if $i != 6 {
      h#{$i}:not([class^='type--var']) {
        @extend %type--h#{$i + 1};
      }
    }
  }

  &--var-large {
    @extend %type--var-large;
  }

  &--var-small {
    @extend %type--var-small;
  }

  &--footer {
    @extend %type--footer;
  }

  &--cta {
    @extend %type--cta;
  }

  &--eyebrow {
    @extend %type--eyebrow;
  }

  &--base {
    @extend %type--base;
  }

  &--large {
    @extend %type--large;
  }

  &--small {
    @extend %type--small;
  }

  // See _type.scss for explanation of this exception.
  &--h3-card {
    @extend %type--h3-card;
  }

  // See _type.scss for explanation of this exception.
  &--h5-card {
    @extend %type--h5-card;
  }

  caption:not([class]),
  &--caption {
    @extend %type--caption;
  }

  &--label {
    @extend %type--label;
  }

  &--xsmall {
    @extend %type--xsmall;
  }

  blockquote:not([class]),
  &--blockquote {
    @extend %type--blockquote;
  }

  cite:not([class]),
  &--cite {
    @extend %type--cite;
  }

  ul:not([class]),
  &--list {
    @extend %type--list;
  }

  ul:not([class]) > li,
  &--list-item {
    @extend %type--list-item;
  }

  ol:not([class]),
  &--ordered-list {
    @extend %type--ordered-list;
  }

  ol:not([class]) > li,
  &--ordered-list-item {
    @extend %type--ordered-list-item;
  }

  dt:not([class]),
  &--dt {
    @extend %type--dt;
  }

  dd:not([class]),
  &--dd {
    @extend %type--dd;
  }

  pre,
  code {
    @extend %type--code;
  }

  // Both pre and code have their font-size set in ems, this is because we want
  // their size to be relative in case someone uses them inside of an h1-h6.
  // But for fenced code blocks, markdown will render a code element inside of
  // a pre. This causes the code element's font-size to be too small because
  // we have an em inside of an em. So in this scenario we tell the code element
  // to just inherit the font-size from its parent pre.
  pre code {
    font-size: inherit;
  }

  figcaption {
    @extend %type--caption;
    text-align: center;
  }

  &--full-bleed {
    @extend %type--full-bleed;
  }

  hr:not([class]),
  &--hairline {
    @extend %type--hairline;
  }
}
